import React, {Component} from 'react';
import PropTypes from 'prop-types'; // ES6
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TextInput
} from 'react-native'

export default class WaitingLeaf extends Component<{}> {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.textPromptStyle}>手机号：{this.props.phoneNumber}</Text>
                <Text style={styles.textPromptStyle}>登录密码：{this.props.userPasswd}</Text>
                <Text style={styles.bigTextPrompt} onPress={() => this.onGoback()}>返回</Text>
            </View>
        );
    };

    onGoback() {
        this.props.onBackAction();
    }
}

// 由于WaitingLeaf需要先定义才能使用，所以必须得放到这里来进行「属性确认」
WaitingLeaf.propTypes = {
    phoneNumber: PropTypes.string,
    userPasswd: PropTypes.string,
    onBackAction: PropTypes.func
};

const {width, height} = Dimensions.get('window');
const widthOfMargin = width * 0.05;
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    textInputStyle: {
        width: 200,
        height: 44,
        margin: widthOfMargin,
        backgroundColor: '#537741',
        fontSize: 20,
        textAlign: 'left'
    },
    textPromptStyle: {
        width: 200,
        height: 44,
        fontSize: 20
    },
    bigTextPrompt: {
        width: 200,
        height: 44,
        margin: widthOfMargin,
        backgroundColor: '#1746cd',
        color: 'white',
        textAlign: 'center',
        fontSize: 30
    }
});